﻿<#import "../../_layout.ftl" as layout>
${Html.s("pagetitle","选择流程")}
<@layout._layout>
<!-- Latest compiled and minified CSS -->
<!-- 引入bootstrap样式 -->
 <link rel="stylesheet" href="/content/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
 <link rel="stylesheet" href="/content/bootstrap/bootstrap-table/bootstrap-table.min.css">
    

<!-- Latest compiled and minified JavaScript -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/content/jquery/3.2.1/jquery.min.js"></script>
 
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="/content/popper/1.15.0/umd/popper.min.js"></script>

<script src="/content/bootstrap/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="/content/bootstrap/bootstrap-table/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="/content/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<div class="head">
    <div class="title">
    ${pagetitle}
    </div>
</div>
<style>
.search-colum{
width:300px;
float:left;
display:block;
margin:3px;
}
.search-colum label{
width: 60px;
}
.clear{
clear:both;
border:none;
}
.rep {         
         float:left;
         list-style-type:none;
         overflow:hidden;
         padding:5px;
         margin-left:0;
         text-decoration:overline;
        }

        .rep li
        {
         dispaly:block;
         margin-left:12px;
         float:left;
         overflow:hidden;
         text-align:center;
         font-size:20px;
         
        }
        .rep li.selected
        {
        	background-color:lightBlue;
        	border: 1px solid #eee;
        	font-color: #fff;
        }
</style>
<div style="width:98%; margin: 3px;">
	<ul id="ulFlow" class="rep">
	</ul><button  onclick="lunchFlow();" class="btn1">发起流程</button></div>	
</div>

<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			url:'/user/flow/mode_list',
			type:"POST",
			dataType:"json",
			success:function(datas){				
				$.each(datas.data.data,function(i,data){	
					$("#ulFlow").append('<li modeid="'+data.name+'"><a href="#">'+data.title+'</a></li>');
				});	
				$("#ulFlow li").each(function(){
					$(this).click(function(){
						$(".rep li").each(function(){
							$(this).removeClass("selected");
						});
					$(this).addClass("selected");
					});
		
				});		
			},
			error:function(data){
				alert("数据加载失败，请重试");
			}
		});
		
		  
	});	   
	function lunchFlow()
	{
		var id= $("#ulFlow li.selected").attr("modeid");
		if(!id || typeof(id)=="undefined" || id=="")
		{
			alert("请选择流程");
			return;
		}
		window.location.href="create?modeid="+id;
	
	}
</script>
</@layout._layout>

  
  